<template>
  <div id="container"></div>
</template>

<script>
import * as echarts from "echarts";
import result from "../jsondata/shenzhneg.json";
const axios = require("axios");

import { TOKEN_PROD, TOKEN_DEV, VUE_BASE_API } from "@/utils/publicdata";

export default {
  data() {
    return {
      area: null,
      img2:
        "image://",
      mapName: "result",
      mainCity: [
        // "渝中区",
        // "江北区",
        // "沙坪坝区",
        // "北碚区",
        // "九龙坡区",
        // "大渡口区",
        // "巴南区",
        // "南岸区",
        // "璧山区",
        // "渝北区"
      ],
      data: [
        // { name: "万州", value: 40 },
        // { name: "渝中", value: 60 }
      ],
      toolTipData: [
        {
          username: "中煤",
          name: "中煤木垒",
          value: "",
          areas: [],
          height: 0.9,
          draught: 0,
          camera: 0
        },
        {
          username: "新建华电",
          name: "新建华电木垒",
          value: "",
          areas: [],
          height: 0.54,
          draught: 0,
          camera: 0
        },
        {
          username: "锦鸿电力",
          name: "锦鸿电力木垒",
          value: "",
          areas: [],
          height: 0.7,
          draught: 0,
          camera: 0
        },
        {
          username: "新疆能源立新",
          name: "新疆能源立新木垒",
          value: "",
          areas: [],
          height: 0.38,
          draught: 0,
          camera: 0
        },
        {
          username: "昌吉国投",
          name: "昌吉国投木垒",
          value: "",
          areas: [],
          height: 0.12,
          draught: 0,
          camera: 0
        },
        {
          username: "国家电投",
          name: "国家电投木垒",
          value: "",
          areas: [],
          height: 0.8,
          draught: 0,
          camera: 0
        },
        {
          username: "新疆双杰",
          name: "新疆双杰木垒",
          value: "",
          areas: [],
          height: 0.45,
          draught: 0,
          camera: 0
        }
      ],
      geoCoordMap: {
        中煤: [90.592082, 44.347759],
        新建华电: [90.492706, 44.345135],
        锦鸿电力: [90.667185, 44.354859],
        新疆能源立新: [90.664938, 44.180175],
        昌吉国投: [90.637659, 44.264766],
        国家电投: [90.391895, 44.272256],
        新疆双杰: [90.488466, 44.276314]
      },
      myChart: null
    };
  },
  mounted() {
    this.getlistdata();
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    // 查询数据
    getlistdata() {
      console.log("123456");
      // 定义请求的URL
      const url = `${VUE_BASE_API}/xmgl/mlConfig/list`;

      console.log("TOKEN_PROD", TOKEN_PROD);

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD,
        "Content-Type": "application/json"
      };
      axios
        .post(url, {}, { headers })
        .then(response => {
          // 从响应中提取total的值
          // console.log("查询数据", response.data);
          // console.log("查询数据", response.data.code);
          if (response.data.code == "200") {
            console.log("=====");
            let item = JSON.parse(response.data.result[0].value9);

            item.forEach(item => {
              if (item.name == "中煤木垒") {
                this.toolTipData[0].draught = item.fenji;
                this.toolTipData[0].camera = item.shexain;
              }

              if (item.name == "新疆华电") {
                this.toolTipData[1].draught = item.fenji;
                this.toolTipData[1].camera = item.shexain;
              }

              if (item.name == "锦鸿电力") {
                this.toolTipData[2].draught = item.fenji;
                this.toolTipData[2].camera = item.shexain;
              }

              if (item.name == "新疆立新") {
                this.toolTipData[3].draught = item.fenji;
                this.toolTipData[3].camera = item.shexain;
              }

              if (item.name == "昌吉国投") {
                this.toolTipData[4].draught = item.fenji;
                this.toolTipData[4].camera = item.shexain;
              }

              if (item.name == "国家电投") {
                this.toolTipData[5].draught = item.fenji;
                this.toolTipData[5].camera = item.shexain;
              }

              if (item.name == "新疆双杰") {
                this.toolTipData[6].draught = item.fenji;
                this.toolTipData[6].camera = item.shexain;
              }

              this.initss();
            });
          }
        })
        .catch(error => {
          console.error("Error:", error.message);
        });
    },
    // 柱状体的主干
    lineData() {
      return this.toolTipData.map(item => {
        // console.log("item.name:", item.username);
        // console.log("geoCoordMap value:", this.geoCoordMap[item.username]);
        return {
          coords: [
            this.geoCoordMap[item.username],
            [
              this.geoCoordMap[item.username][0],
              this.geoCoordMap[item.username][1] + item.height // 使用 height 属性
            ]
          ]
        };
      });
    },
    // 柱状体的顶部
    scatterData() {
      return this.toolTipData.map(item => {
        return [
          this.geoCoordMap[item.username][0],
          this.geoCoordMap[item.username][1] + item.height, // 使用 height 属性
          item
        ];
      });
    },
    initss() {
      const dom = document.getElementById("container");
      dom.removeAttribute("_echarts_instance_");
      this.myChart = echarts.init(dom);
      this.myChart.showLoading();
      echarts.registerMap("result", result);
      var mapFeatures = echarts.getMap(this.mapName).geoJson.features;
      this.myChart.hideLoading();
      mapFeatures.forEach(
        function(v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          this.geoCoordMap[name] = v.properties.cp;
        }.bind(this)
      );

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = this.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      }.bind(this);

      const option = {
        tooltip: {
          // formatter: function(params) {
          //   return `<div style="padding: 2vw;background: #244b7d;color:#fff">${params.name}\n</div>`;
          // },
          show: false,
          // borderColor: "#333",
          borderColor: "#e33c2f",
          padding: [5, 10],
          textStyle: {
            color: "#333",
            fontSize: "16"
          }
        },
        geo: [
          {
            layoutCenter: ["50%", "50%"],
            layoutSize: "180%",
            show: true,
            map: this.mapName,
            roam: false,
            zoom: 0.5,
            aspectScale: 1.2,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#000"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(3,27,78,0.75)"
                    },
                    {
                      offset: 1,
                      color: "rgba(58,149,253,0.75)"
                    }
                  ],
                  global: true
                },
                // 描边颜色
                // borderColor: "#c0f3fb",
                // borderColor: "#75f3fe",
                // #81feff
                borderColor: "#b6feff",
                borderWidth: 2.5,
                // shadowColor: "#8cd3ef",
                shadowColor: "#4eedf8",
                shadowOffsetY: 10,
                shadowBlur: 40
              },
              emphasis: {
                areaColor: "#00baff"
              },
              select: {
                areaColor: "#00baff"
              }
            }
          },
          {
            type: "map",
            map: this.mapName,
            zlevel: -1,
            aspectScale: 1.2,
            zoom: 0.5,
            layoutCenter: ["50%", "51%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(58,149,253,0.8)",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)"
              }
            }
          },
          {
            type: "map",
            map: this.mapName,
            zlevel: -2,
            aspectScale: 1.2,
            zoom: 0.5,
            layoutCenter: ["50%", "52%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(0, 59, 180,0.6)",
                shadowColor: "rgba(0, 59, 180,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent"
              }
            }
          },
          {
            type: "map",
            map: this.mapName,
            zlevel: -3,
            aspectScale: 1.2,
            zoom: 0.5,
            layoutCenter: ["50%", "53%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(40, 116, 212,0.6)",
                shadowColor: "rgba(40, 116, 212,0.9)",
                shadowOffsetY: 15,
                shadowBlur: 10
                // areaColor: "transpercent"
              }
            }
          }
          // {
          //   type: "map",
          //   map: this.mapName,
          //   zlevel: -4,
          //   aspectScale: 1.2,
          //   zoom: 0.5,
          //   layoutCenter: ["50%", "54%"],
          //   layoutSize: "180%",
          //   roam: false,
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 5,
          //       borderColor: "rgba(5,9,57,0.8)",
          //       shadowColor: "rgba(29, 111, 165,0.8)",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "rgba(5,21,35,0.1)"
          //     }
          //   }
          // }
        ],
        series: [
          {
            type: "map",
            map: this.mapName,
            geoIndex: 0,
            aspectScale: 1.2,
            zoom: 0.5,
            showLegendSymbol: true,
            roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: "120%"
                }
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(3,27,78,0.75)"
                    },
                    {
                      offset: 1,
                      color: "rgba(58,149,253,0.75)"
                    }
                  ],
                  global: true
                },
                borderColor: "#fff",
                borderWidth: 0.2
              },
              emphasis: {
                areaColor: "#00baff"
              },
              select: {
                areaColor: "#00baff"
              }
            },
            layoutCenter: ["50%", "50%"],
            layoutSize: "180%",
            animation: false,
            markPoint: {
              symbol: "none"
            },
            data: this.data
          },
          {
            type: "lines",
            zlevel: 5,
            effect: {
              show: false,
              symbolSize: 100
            },
            // 杆子颜色
            lineStyle: {
              width: 6,
              // color:"#ccc",
              // color: "#25aff3",
              color: "rgba(255,255,255, 0.5)",
              opacity: 1,
              curveness: 0
            },
            label: {
              show: 0,
              position: "end",
              formatter: "300"
            },
            silent: true,
            data: this.lineData()
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  var name = params.data[2].name;
                  var value = params.data[2].value;
                  // 风机
                  var draught = params.data[2].draught;
                  // 摄像头
                  var camera = params.data[2].camera;
                  // 摄像头
                  // var text = `{tline|${name}} : {fline|${value}}\n市场规模：999`;
                  var text = `{tline|${name}}\n风机:${draught} 摄像头：${camera}`;
                  return text;
                },
                color: "#fff",
                rich: {
                  fline: {
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 600
                  },
                  tline: {
                    color: "#ABF8FF",
                    fontSize: 12
                  }
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: "#00FFF6",
              opacity: 1
            },
            symbol: this.img2,
            symbolSize: [120, 60],
            symbolOffset: [0, -20],
            z: 999,
            data: this.scatterData()
          }
          // {
          //   name: "Top 5",
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   data: convertData(this.toolTipData),
          //   showEffectOn: "render",
          //   itemStyle: {
          //     normal: {
          //       color: "#00FFFF"
          //     }
          //   },
          //   rippleEffect: {
          //     scale: 5,
          //     brushType: "stroke"
          //   },
          //   label: {
          //     normal: {
          //       formatter: "{b}",
          //       position: "bottom",
          //       show: false,
          //       color: "#fff",
          //       distance: 10
          //     }
          //   },
          //   symbol: "circle",
          //   symbolSize: [20, 10],
          //   itemStyle: {
          //     normal: {
          //       color: "#16ffff",
          //       shadowBlur: 10,
          //       shadowColor: "#16ffff"
          //     },
          //     opacity: 1
          //   },
          //   zlevel: 4
          // }
        ]
      };

      this.myChart.setOption(option);

      this.myChart.on("click", async params => {
        // console.log(params);
        if (
          params.data &&
          params.data.length > 2 &&
          params.data[2].name === "中煤木垒"
        ) {
          // window.location.href =
          //   "http://101.43.164.214:11127/#/large?userId=1829729113251758082&sn=F20D19C31C5140C585185BAB10E8D9A2";
          // "http://101.43.164.214:11127/#/large";
          // window.location.assign ("http://101.43.164.214:11127/#/large?userId=1829729113251758082&sn=F20D19C31C5140C585185BAB10E8D9A2")
          // window.open('http://101.43.164.214:11127/#/large?userId=1829729113251758082&sn=F20D19C31C5140C585185BAB10E8D9A2', '_blank')
          // window.open('https://zm.zhgdyun.com:15001/#/large?userId=1829729113251758082&sn=F20D19C31C5140C585185BAB10E8D9A2', '_blank')
          window.open('http://121.37.106.37:9811/#/large?userId=1829729113251758082&sn=F20D19C31C5140C585185BAB10E8D9A2', '_blank')
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
#container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: 5s linear infinite move;
}

@keyframes move {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
</style>